<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
        #a {
            border: red 1px solid;
        }
    </style>
    <script>
        // function  myLoad(){
        //     console.log(document.getElementById("a"));
        // }
        /*当页面元素加载完成后，执行此 代码块*/
        $(document).ready(function(){
            console.log(document.getElementById("a"));
        });
        /**
         * DOM对象， document
         * Jquery对象， 所有对象都是一个数组
         * Juqery 与dom对象  之间的方法不能通用
         * Jquery 转换为 DOM对象: $("p")[1]
         * Dom对象转化为 JQuery对象： $(dom)
         *
         *
         */

        $(function(){
            // console.log(document.getElementById("a"));
            //jquery的选择器
            //标签选择器
            console.log($("p"));
            //id选择器
            console.log($("#a"));
            //class选择器
            console.log($(".c"));
            //:first
            console.log($(".c:first"));
            //:even 获取偶数索引元素
            console.log($(".c:even"));
            //属性选择器，根据属性选择元素
            console.log($("input[type=button]"));
            //控制元素显示
            // $("#a").show();
            //控制元素隐藏
            // $("#a").hide();
            $("input[type=button]:last").click(function(){
                // $("#a").show();
                // $("#a").toggle();  在隐藏与显示之间切换
                // $("#a").toggle(3000); 在3000毫秒内完成此动作
                // $("#a").toggle(3000, function(){  //  当动作完成后的回调
                //     alert("此动作完成了");
                // });
                //淡入淡出效果
                // $("#a").fadeToggle(3000, function(){
                //     alert("此动作完成了");
                // });
                //淡出到 百分比
                // $("#a").fadeTo(2000, 0.01);
                //滑动效果
                // $("#a").slideToggle(3000, function(){
                //     alert("此动作完成了");
                // });

                // $("#a").animate({
                //     width: '100px',
                //     height: '200px'
                // }, 3000, function(){
                //     alert("此动作完成了");
                // })

                $("#a").css("color", "red")
                    .css("font-size", "20px")
                    .html("段落")
                    .fadeToggle(3000);
            });
            //click 方法没有参数，表示 触发事件
            // $("input[type=button]:last").click();
        });
    </script>
</head>
<!--<body onload="myLoad()">-->
<body >
    <p id="a">这是一个段落</p>
    <p class="c">这是一个段落1</p>
    <p class="c">这是一个段落2</p>
    <p class="c">这是一个段落3</p>

    <input type="text">
    <input type="text">
    <input type="button">
    <input type="text">
    <input type="button" value="点我">
</body>


</html>